<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1 v-on指令 鼠标单击事件</h1>
        <p>已经被点击了{{num}}次</p>
        <button v-on:click="num++">+++</button>
        <button v-on:click="num--">---</button>
        <h3>许多事件处理逻辑会更加复杂,所以在复杂的逻辑中,直接把代码放在v-on指令中是不合适的
            因此,对于复杂事件,可以把代码放置在方法中,然后进行调用
        </h3>
        <button v-on:click="loginfo()">打印消息</button>
        <button v-on:click="loginfo('111')">带参数</button>
        <h3>可以简写成@click</h3>
        <button @click="loginfo('222')">带参数</button>
        <h1>知识点2 键盘事件keyup,keydown</h1>
        <h3>keyup释放任意键 keydown按下任意键</h3>
        <input type="text" @keyup="show('up')">
        <input type="text" @keyup="show('down')">
        <h1>知识点3 其他事件 dblclick双击 contextmenu右击 mouseover鼠标上移 mouseout鼠标移开</h1>
        <button @dblclick="num++">111</button>
        <button @contextmenu="num++">222</button>
        <button @mouseover="num++">333</button>
        <button @mouseout="num++">444</button>
        <h1>知识点4 事件修饰符</h1>
        <h3>1 .once 表示该事件只能被触发一次</h3>
        <button @click.once="num++">once</button>
        <h3>2 .prevent 当事件触发时,阻止元素默认的行为</h3>
        <h4>submit有一个默认的行为即提交后会重新加载页面,通过prevent可以阻止默认行为</h4>
        <form @submit="handleSubmit()">
            <h5>不使用修饰符</h5>
            <button type="submit">提交</button>
        </form>
        <form @submit.prevent="handleSubmit()">
            <h5>使用修饰符</h5>
            <button type="submit">提交</button>
        </form>
        <h3>3 .stop 阻止冒泡</h3>
        <h4>冒泡是内部元素事件触发后,继续向外层触发事件</h4>
        <div id="box1" @click="box('box1')">box1
            <div id="box2" @click.stop="box('box2')">box2
                <div id="box3" @click="box('box3')">
                    box3
                </div>
            </div>
        </div>
        <h3>4 .capture事件补货</h3>
        <h4>如果我们在层叠事件中想要先执行某个事件,可以使用capture修饰符.
            它是当内部的元素触发时,先处理capture事件修饰符的事件,然后再提交当前事件执行
            捕获的顺序是由外到内
        </h4>
        <div id="box1" @click.capture="box('box1')">box1
            <div id="box2" @click.capture="box('box2')">box2
                <div id="box3" @click="box('box3')">
                    box3
                </div>
            </div>
        </div>
        <h3>5 .self只在绑定了事件的那个对象层中使用</h3>
        <div id="box1" @click.="box('box1')">box1
            <div id="box2" @click.self="box('box2')">box2
                <div id="box3" @click="box('box3')">
                    box3
                </div>
            </div>
        </div>
        <h3>6 监听键盘事件的按键修饰符</h3>
        <p>.enter .tab .delete(删除键和退格键) .esc .space .up .down
            .left .right .ctrl .alt .shift .meta(windows的徽标键)
        </p>
        <h4>alt+C</h4>
        <input @keyup.alt.c="show('alt+c')">
        <h3>7 鼠标修饰符</h3>
        <p>.left .right .middle</p>
    </div>
</body>
</html>
<script>
    const appConn=Vue.createApp({
        data() {
            return {
                num:0
            }
        },
        methods: {
            loginfo(val){
                console.log(val||"hello, world !");
            },
            show(val){
                console.log(val);
            },
            handleSubmit(){

            },
            box(val){
                alert(val);
            }
        },
    }).mount("#app")
</script>
<style>
    #box1{
        height: 200px;
        width: 300px;
        background: #ee4d4d;
    }
    #box2{
        height: 150px;
        width: 250px;
        background: #248d36;
    }
    #box3{
        height: 100px;
        width: 200px;
        background: #c453b0;
    }
</style>